<html>
    <head>
        <title>报警列表</title>
        <link rel="stylesheet" href="../../../assets/bundle.element.css">
        <link rel="stylesheet" href="../../../style.css">

        <style>
            .level{
                padding: 5px 10px 5px 10px;
                border-radius: 10px;
                background: #575757;
                color: #fff;
            }

            .page-main{
                padding-left: 10px;
                padding-top: 10px;
            }


        </style>

    </head>
    <body>
        <div class="page" id="page-alarmList" v-cloak>

            <div class="page-title">报警分析</div>
            <div class="page-main">
                <el-row>
                    <el-col :span="24">
                        <el-form :inline="true">
                            <el-form-item label="时间">
                                <el-date-picker type="date" value-format="yyyy-MM-dd" v-model="query.beginTime" placeholder="起始" style="width: 150px;"></el-date-picker>
                                -
                                <el-date-picker type="date" value-format="yyyy-MM-dd" v-model="query.endTime" placeholder="截止" style="width: 150px;"></el-date-picker>
                            </el-form-item>

                            <el-form-item label="类型">
                                <el-select placeholder="告警类型" v-model="query.type" style="width: 100px;">
                                    <el-option label="全部" value="-1"></el-option>
                                    <el-option v-for="item in types" :label="item.name" :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="处理状态">
                                <el-select placeholder="处理状态" v-model="query.status" style="width: 100px;">
                                    <el-option label="全部" value="-1"></el-option>
                                    <el-option v-for="item in statuss" :label="item.name" :value="item.value"></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item>
                                <el-button type="primary" @click="search">查询</el-button>
                            </el-form-item>

                            <!--
                            <el-form-item>
                                <el-select placeholder="批量操作" v-model="bathValue" v-on:change="batch" style="width: 150px;">
                                    <el-option label="×批量删除" value="1"></el-option>
                                    <el-option label="√批量完成" value="2"></el-option>
                                </el-select>
                            </el-form-item>
                            -->

                        </el-form>
                    </el-col>
                </el-row>

                <el-row>
                    <el-col :span="24">
                            <el-table :data="items" height="250" :stripe="true" :border="true" size="mini" style="width: 100%" @selection-change="onCheckbox">
                                <el-table-column type="selection" width="55"></el-table-column>
                                <el-table-column type="index" label="序号" width="50" align="center"></el-table-column>
                                <el-table-column prop="ProjectName" label="项目名称"></el-table-column>
                                <el-table-column prop="DevName" label="设备名称"></el-table-column>
                                <el-table-column prop="DevAddr" label="设备地址"></el-table-column>
                                <el-table-column prop="manager" label="联系人"></el-table-column>
                                <el-table-column prop="phone" label="电话"></el-table-column>
                                <el-table-column prop="ErrorName" label="告警名称"></el-table-column>
                                <el-table-column prop="errorType_Text" label="告警类型"></el-table-column>
                                <el-table-column prop="errorGrade" label="告警级别"></el-table-column>
                                <el-table-column prop="LogTime" label="发生时间" width="150"></el-table-column>

                                <el-table-column prop="ProcessFlag_Text" label="当前状态">
                                    <template slot-scope="scope">
                                        <span class="level">{{scope.row.ProcessFlag_Text}}</span>
                                    </template>
                                </el-table-column>
                                <el-table-column label="操作" width="130px" fixed="right" align="center">
                                    <template slot-scope="scope">
                                        <el-button v-if="scope.row.ProcessFlag==0" size="mini" round icon="el-icon-mobile-phone" v-on:click="dispatch(scope.$index,scope.row)">
                                        </el-button>

                                        <!--
                                        <el-button size="mini" round icon="el-icon-delete" v-on:click="remove(scope.$index,scope.row)">
                                        </el-button>
                                        -->
                                    </template>
                                </el-table-column>
                            </el-table>
                    </el-col>
                </el-row>
            </div>

            <div class="page-footer">
                <el-pagination background layout="prev, pager, next" :pagesize="pageSize" :total="totalCount" :current-page.sync="currentPage" @current-change="onChangePage">
                </el-pagination>
            </div>

            <!--编辑弹窗-->
            <el-dialog title="报警派单" :visible.sync="editAlarmVisible" width="600">
                <el-card>
                    <el-form :inline="true" label-width="100px">


                        <el-form-item label="接收人(*)">
                            <el-select v-model="dptchForm.toUserId">
                                <el-option v-for="item in childUsers" :value="item.Id" :label="item.userName"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-col :span="24">
                            <el-form-item label="报警详情(*)">
                                <el-input type="textarea" style="width:350px;" v-model="dptchForm.alarmMsg"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-form-item>
                            <el-button type="primary" size="mini" round style="margin-left: 100px;" @click="onSaveDptch">保存</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
            </el-dialog>


        </div>
        <script type='text/javascript' src='../../../assets/bundle.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../../assets/jquery-1.11.2.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../../assets/echarts.min.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../../js/common.js' charset='utf-8'></script>
        <script type='text/javascript' src='../../../js/component.js' charset='utf-8'></script>
        <script>

                var vuePage=new Vue({
                    el:'#page-alarmList',
                    data:{
                        query:{
                            beginTime:'',
                            endTime:'',
                            status:'',
                            type:'',
                        },

                        dptchForm:{
                            alarmId:'',
                            alarmName:'',
                            alarmMsg:'',
                            toUserId:''
                        },

                        items:[],
                        selectIdArr:[],
                        editAlarmVisible:false,
                        bathValue:'',
                        currentPage:1,
                        totalCount:50,
                        pageSize:10,
                        types:[],
                        statuss:[],
                        childUsers:[]
                    },
                    methods:{
                        search:function(){
                            this.currentPage=1;
                            this.loadDatas();
                        },

                        remove:function(index,row){
                            this.$confirm('此操作将永久删除项数据, 是否继续?', '提示', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(()=>{



                                this.$message({
                                    message: '删除成功！',
                                    type: 'success'
                                });
                            });
                        },

                        dispatch:function(index,row){
                            this.dptchForm.alarmId = row.Id;
                            this.dptchForm.alarmName = row.ErrorName;
                            this.dptchForm.alarmMsg = row.ErrorName;
                            this.dptchForm.wf_projectNo = row.ProjectNo;
                            this.editAlarmVisible=true;
                        },
                        batch:function(val){
                            alert(val);
                        },
                        onCheckbox(val){
                            this.selectIdArr = val.map(v=>{return v.id});
                        },
                        onChangePage(page){
                            alert(page);
                            this.currentPage = page;
                            this.loadDatas();
                        },
                        onSaveDptch:function(){
                            var _self = this;
                            var param={
                                wf_operation:"手工开单",
                                wf_businesstype:5,
                                wf_eventName:this.dptchForm.alarmName,
                                wf_eventMsg:this.dptchForm.alarmMsg,
                                wf_objType:5,
                                wf_objid:this.dptchForm.alarmId,
                                wf_to:this.dptchForm.toUserId,  //接收人Id
                                wf_seqno:0,
                                wf_projectNo:this.dptchForm.wf_projectNo,
                            };
                            HttpUtil.get('WorkFlow/Add',param).success(function(data){
                                console.log('alarmDispatch',data);
                                if(data.state==0){
                                    _self.$message({
                                        message: '派单成功！',
                                        type: 'success'
                                    });

                                    for(var i=0;i<_self.items.length;i++){
                                        if(_self.items[i].Id == _self.dptchForm.alarmId){
                                            _self.items[i].ProcessFlag =1;
                                            _self.items[i].ProcessFlag_Text='已派单';
                                            break;
                                        }
                                    }

                                    _self.editAlarmVisible = false;

                                }else{
                                    _self.$message({
                                        message: '派单失败！',
                                        type: 'error'
                                    });
                                }
                            });
                        },
                        loadDatas:function(){
                            var _self = this;
                            HttpUtil.get('Error/List',{
                                errorType:this.query.type,
                                    ProcessFlag:this.query.status,
                                pageno:this.currentPage,
                                pagesize:this.pageSize,
                                beginTime:this.query.beginTime,
                                endTime:this.query.endTime})
                            .success((data)=>{
                                console.log('getAlarms',data);
                                var datas =data.data;
                                for(var i=0;i<datas.length;i++){
                                    for(var j=0;j<_self.types.length;j++){
                                        if(datas[i].errorType == _self.types[j].value){
                                            datas[i].errorType_Text = _self.types[j].name;
                                            break;
                                        }
                                    }

                                    for(var j=0;j<_self.statuss.length;j++){
                                        if(datas[i].ProcessFlag == _self.statuss[j].value){
                                            datas[i].ProcessFlag_Text = _self.statuss[j].name;
                                            break;
                                        }
                                    }
                                    datas[i].LogTime = datas[i].LogTime.replace("T"," ");
                                }

                                _self.items = datas;
                                _self.totalCount = datas.total;

                            });
                        }
                    },
                    created:function(){

                        var _self = this;
                        this.query.beginTime = TimeUtil.convertToString(new Date()).substr(0,10);
                        this.query.endTime = this.query.beginTime;

                        // DeviceData.getAlarmTypes().success(function(data){
                        //     _self.types = data;
                        // });
                       _self.types=[
                           {name:'报警',value:0},
                           {name:'故障',value:1},
                           {name:'系统',value:2}
                       ],
                        // DeviceData.getAlarmStatuss().success(function(data){
                        //     _self.statuss = data;
                        // });
                           _self.statuss = [
                               {name:'未派单',value:0},
                               {name:'已派单',value:1},
                               {name:'已确认',value:2},
                               {name:'已处理',value:3}
                           ];
                        HttpUtil.get('User/Child').success(function(data){
                            console.log('getChildUsers',data);
                            _self.childUsers = data.data;
                        });

                        this.loadDatas();
                    },
                    mounted:function(){
                    }
                });

            </script>
    </body>
</html>
